<template>
    <!-- 订单页 -->
  <div>
    <mini-head :title="$route.name" />
    <div class="box">
      <van-divider />
      <van-contact-card
        :type="zType"
        :name="contact.linkMan"
        :tel="contact.mobile"
        @click="onadd"
      />
      <div class="items">
        <van-card
          v-for="item in items"
          :key="item.id"
          :num="item.number"
          :price="item.price"
          :title="item.name"
          :thumb="item.pic"
        />
      </div>
    </div>
    <van-submit-bar :price="pic * 100" button-text="下单" />
  </div>
</template>

<script>
import MiniHead from '../../components/MiniHead.vue'
import { fetchCartItems, fetchContacts, fetchContactInfo } from '../../api/index'
import { getToken } from '../../utils/index'

export default {
  data () {
    return {
      zType: 'add',
      items: [],
      pic: 0,
      contact: {
        linkMan: '',
        mobile: ''
      }
    }
  },
  created () {
    this.getItems()
    this.getContacts()
  },
  methods: {
    // 获取初始数据
    getItems () {
      // 获取下单的商品
      fetchCartItems({
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.items = res.data.data.items.filter((item) => item.selected)
          this.pic = res.data.data.price
        }
      })
    },
    getContacts () {
      // 如果从 联系人列表会 传 id 判断是否有id 有 直接等于 这个id对应联系人
      if (this.$route.query.contactId) {
        fetchContactInfo({
          id: this.$route.query.contactId,
          token: getToken()
        }).then(res => {
          // console.log(res.data.data.info)
          this.contact.linkMan = res.data.data.info.linkMan
          this.contact.mobile = res.data.data.info.mobile
          this.zType = 'edit'
        })
        return false
      }
      // 获取联系人收货地址
      // getContacts () {
      fetchContacts({
        token: getToken()
      }).then((res) => {
        if (res.data.code === 700) {
          // 没有收货地址
          this.zType = 'add'
        }
        if (res.data.code === 0) {
          this.zType = 'edit'
          // 获取所有联系人
          const contacts = res.data.data.result
          // 判断是否有默认联系人
          const defaultContact = contacts.find((contact) => contact.isDefault)
          if (defaultContact) {
            // 有默认联系人
            this.contact = defaultContact
          } else {
            // 第一个联系人
            this.contact = contacts[0]
          }
        }
      })
    },
    onadd () {
      // 进入联系人列表
      this.$router.push('/contactLists')
    }
  },

  components: { MiniHead }
}
</script>

<style lang="scss" scoped>
.box {
  margin-top: 1.28rem;
  margin-bottom: 1.5rem;
}
</style>
